<style scoped>
.storeReturnQuery {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 89.5vh;
  position: relative;
}
.srq-top {
  padding: 15px 0;
  border-bottom: 2px solid #f4f4f4;
}
.srq-top div {
  display: flex;
}
.srq-top p:first-child {
  margin: 3px 6px 0 0;
  display: inline-block;
  /* width: 70px; */
  white-space: nowrap;
  /* text-align: end; */
}
.srq-top p:not(:first-child) {
  margin: 3px 6px 0 12px;
  display: inline-block;
  white-space: nowrap;
}
.wd {
  width: 160px;
}
.srq-btn {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
}
.srq-tab {
  display: flex;
}
.tab-left {
  width: 35%;
  padding-right: 5px;
  border-right: 2px solid #f4f4f4;
}
.tab-right {
  width: 65%;
  padding-left: 5px;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
.tip {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 5px 0 5px;
}
.tip1 {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 1px 0 4px;
}
</style>

<style>
.storeReturnQuery .srq-top .el-input__inner,
.storeReturnQuery .srq-btn .el-input__inner {
  height: 30px;
}
.storeReturnQuery .srq-top .el-date-editor .el-range__icon {
  line-height: 23px;
}
.storeReturnQuery .srq-top .el-date-editor .el-range-separator {
  width: 8%;
  line-height: 23px;
}
.storeReturnQuery .srq-btn .el-checkbox.is-bordered {
  padding: 5px 20px 9px 10px;
  height: 30px;
}
.storeReturnQuery .el-checkbox.is-bordered {
  padding: 5px 10px 9px 10px;
  height: 30px;
}
</style>

<template>
  <div class="storeReturnQuery">
    <div class="srq-top">
      <div>
        <p>店铺编号</p>
        <el-input disabled class="wd" v-model="directSaleNo"></el-input>

        <!-- <p>型号</p>
        <el-input class="wd"></el-input> -->

        <p>款号</p>
        <el-input class="wd" v-model="kindsNumber"></el-input>

        <p>退货日期</p>
        <el-date-picker
          class="update-el-datetimerange"
          unlink-panels
          v-model="timeDate"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <p>单据确认</p>
        <el-select
          class="wd update-el-select"
          clearable
          v-model="affirm"
          placeholder="请选择"
        >
          <el-option
            v-for="item in confirmList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="srq-btn">
      <div>
        <el-button @click="query" type="primary" icon="el-icon-search"
          >查询</el-button
        >
        <el-button
          icon="el-icon-circle-check"
          @click="Confirm"
          :disabled="isShow || isRegular"
          >确认</el-button
        >
        <el-button
          @click="Delete"
          icon="el-icon-delete"
          :disabled="isShow || isRegular"
          >删除</el-button
        >
        <el-button
          icon="el-icon-circle-plus-outline"
          @click="Supplement"
          :disabled="isShow || isRegular"
          >补单</el-button
        >
        <el-button :disabled="isRegular" @click="openPrint">列印</el-button>
      </div>
      <div style="float: right; white-space: nowrap; display: flex">
        <div style="margin-top: 5px; display: flex">
          <div class="tip" style="background: #6bcc7b"></div>
          :已完成
          <div class="tip" style="background: #ffb700"></div>
          :未收货
          <div class="tip" style="background: #ff0000"></div>
          :
          <p style="margin-right: 15px">未确认</p>
          <!-- <div class="tip" style="background:#017aff;"></div>:<p style="margin-right:15px;">调货摘要</p> -->
        </div>
        <el-checkbox v-model="twoInfo" border>二维</el-checkbox>
      </div>
    </div>

    <div class="srq-tab">
      <div class="tab-left">
        <el-table
          border
          id="tip1"
          show-summary
          :data="aList"
          style="width: 100%"
          height="70vh"
          @row-click="rowClick"
          @row-dblclick="dbClick"
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column label="单据状态" width="90">
            <template slot-scope="scope">
              <div style="display: flex; text-align: center">
                <div
                  class="tip1"
                  :style="{
                    background:
                      scope.row.sequenceStatus == 0
                        ? '#FF0000'
                        : scope.row.sequenceStatus == 1
                        ? '#FFB700'
                        : '#6BCC7B'
                  }"
                ></div>
                <p>
                  {{
                    scope.row.sequenceStatus == 0
                      ? '未确认'
                      : scope.row.sequenceStatus == 1
                      ? '未收货'
                      : '已完成'
                  }}
                </p>
              </div>
            </template>
          </el-table-column>
          <template v-for="i in bList">
            <el-table-column
              show-overflow-tooltip
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop + Math.random()"
            >
            </el-table-column>
          </template>
        </el-table>
      </div>

      <div class="tab-right">
        <el-table
          id="tip1"
          :data="cList"
          style="width: 100%"
          highlight-current-row
          height="70vh"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <!-- <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column> -->
          <template v-for="i in eList">
            <el-table-column
              show-overflow-tooltip
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop + Math.random()"
            >
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>

    <!-- 分頁 -->
    <foot-view
      class="footView"
      :pagesNum="pagesNum"
      :hasPagination="true"
      :pageSize="limit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <div slot="text">
        <el-popover
          placement="top-start"
          width="120"
          max-height="100px"
          trigger="click"
        >
          <i slot="reference" class="el-icon-date"> 表头配置</i>
        </el-popover>
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>

    <new-vs
      v-show="showNew"
      :flag="showNew"
      @inpNumChange="
        () => {
          this.inpList = this.getInput()
        }
      "
      :title="title"
      :detail="detail"
      :detail2="detail2"
      @success1="success1"
      @closeNew="closeNew"
      @saveNew="saveNew"
    >
    </new-vs>

    <div v-show="false" id="L"></div>
    <print-return
      v-show="false"
      :manufacturerName="manufacturerName"
      :dp="directSaleNo"
      :outSequence="outSequence"
      :totalNumber="this.totalNumber"
      :totalMoney="this.totalMoney"
    ></print-return>
  </div>
</template>

<script>
const resources = require('../../../config/printCSS')
import printReturn from '../../../components/printReturn.vue'
import footView from '../../../components/FootView'
import {
  getShop,
  getGoods,
  returnConfirm,
  deleteGoods
} from '../../../network/shop'
import newVs from '../StoreReturn/childComp/newVs'
import enterUp from '../../../components/mixins/enterUp'
export default {
  name: 'store_return_query',
  mixins: [enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    
    this.inpList = this.getInput()
    if (localStorage.getItem('whatState') == '直营') {
      this.isRegular = false
    } else {
      this.isRegular = true
    }
    this.bList = this.bList1
    this.eList = this.eList1
    //获取店铺编号
    getShop().then((res) => {
      console.log(res.data)
      this.directSaleNo = res.data.data.headquartersNo
    })
  },
  components: {
    footView,
    newVs,
    printReturn
  },
  data() {
    return {
      inpList: [],
      isRegular: false,
      totalMoney: '',
      totalNumber: '',
      manufacturerName: '1-1',
      dp: '',
      affirm: null,
      confirmList: [
        { label: '全部', value: null },
        { label: '未确认', value: 0 },
        { label: '未收货', value: 1 },
        { label: '已完成', value: 2 }
      ],
      isShow: false,
      showNew: false,
      jxQuarter:null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))[1],
      allData: [],
      //数据总条数
      dataLen: 0,
      //总页码数
      pagesNum: 0,
      //每页显示条数
      limit: 20,
      // 当前页码
      currentPage: 1,

      saveList: [],
      temporaryList: [],
      timeDate: '',
      aList: [],
      cList: [],
      directSaleNo: '',
      kindsNumber: '',
      bList: [],
      twoInfo: false,

      bList1: [
        { prop: 'outSequence', label: '退货序号', width: '140' },
        { prop: 'sendTime', label: '寄货日期', width: '140' },
        { prop: 'affirm', label: '已确认', width: '80' },
        { prop: 'mnemonicCode', label: '收货' },
        { prop: 'outTime', label: '日期', width: '140' },
        { prop: 'number', label: '数量' },
        { prop: 'money', label: '金额' },
        { prop: 'operator', label: '操作员' },
        { prop: 'remark', label: '备注' }
      ],

      eList: [],
      eList1: [
        { prop: 'kindsNumber', label: '款号', width: '120' },
        { prop: 'colorName', label: '颜色' },
        { prop: 'size', label: '尺码编号' },
        { prop: 'sum', label: '数量' },
        { prop: 'sellingPrice', label: '售价' },
        { prop: 'discount', label: '折数' },
        { prop: 'onePrice', label: '单价' },
        { prop: 'money', label: '金额' },
        { prop: 'brandedName', label: '品名' },
        { prop: 'commodityName', label: '品牌' },
        { prop: 'entryTime', label: '录入时间', width: '160' }
      ],
      eList2: [
        { prop: 'typeNumber', label: '型号', width: '120' },
        { prop: 'colorName', label: '颜色' },
        { prop: 'c05', label: '05-XS' },
        { prop: 'c07', label: '07-S' },
        { prop: 'c09', label: '09-M' },
        { prop: 'c11', label: '11-L' },
        { prop: 'c13', label: '13-XL' },
        { prop: 'c15', label: '15-2L' },
        { prop: 'c17', label: '17-3L' },
        { prop: 'c19', label: '19-4L' },
        { prop: 'c21', label: '21-5L' },
        // {prop:'',label:'D'},
        { prop: 'f', label: 'F' },
        { prop: 'total', label: '小计' },
        { prop: 'sellingPrice', label: '售价' },
        { prop: 'onePrice', label: '单价' },
        { prop: 'money', label: '金额' },
        { prop: 'brandedName', label: '品名' },
        { prop: 'commodityName', label: '品牌' },
        { prop: 'quarence', label: '季度' }
      ],
      twoList: [],
      outSequence: '',
      title: '',
      detail: [],
      detail2: []
    }
  },
  methods: {
    openPrint() {
      if (this.temporaryList == '') {
        this.$message.warning('请勾选二维表并选中左表数据')
        return
      }
      this.print()
    },
    print(x = 1, id = 'printTable') {
      let index = --x
      let printTable = document.getElementById('printTable')
      let length = this.temporaryList.length
      console.log(printTable)

      for (index; index < length; index++) {
        const e = this.temporaryList[index]
        e['number'] =
          e.c05 +
          e.c07 +
          e.c09 +
          e.c11 +
          e.c13 +
          e.c15 +
          e.c17 +
          e.c19 +
          e.c21 +
          e.c23 +
          e.f

        let row = printTable.insertRow(printTable.FetchRowCount)
        row.insertCell(0).innerHTML = index + 1
        row.insertCell(1).innerHTML = e.typeNumber + '-' + e.colorNo
        row.insertCell(2).innerHTML = e.colorNo
        row.insertCell(3).innerHTML = e.commodityName
        row.insertCell(4).innerHTML = e.c05
        row.insertCell(5).innerHTML = e.c07
        row.insertCell(6).innerHTML = e.c09
        row.insertCell(7).innerHTML = e.c11
        row.insertCell(8).innerHTML = e.c13
        row.insertCell(9).innerHTML = e.c15
        row.insertCell(10).innerHTML = e.c17
        row.insertCell(11).innerHTML = e.c19
        row.insertCell(12).innerHTML = e.c21
        row.insertCell(13).innerHTML = e.c23
        row.insertCell(14).innerHTML = e.f
        row.insertCell(15).innerHTML = e.number
        row.insertCell(16).innerHTML = e.onePrice
        row.insertCell(17).innerHTML = e.money
      }
      this.totalNumber = this.temporaryList.reduce((prev, next) => {
        return prev + next.number
      }, 0)
      this.totalMoney = this.temporaryList.reduce((prev, next) => {
        return prev + next.money
      }, 0)
      console.log(this.totalNumber)
      console.log(this.totalMoney)
      setTimeout(() => {
        let printHtml = document.getElementById('p').innerHTML
        // console.log(printHtml)
        let wind = window.open(
          '',
          'newwindow',
          'height=500, width=1000, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'
        )
        wind.document.body.innerHTML = printHtml
        let style = document.createElement('style')
        style.type = 'text/css'
        style.innerHTML = resources.printCSS
        wind.document.head.appendChild(style)
        wind.print()
        printHtml = document.getElementById('L').innerHTML
      }, 500)
    },
    closeNew() {
      this.showNew = false
      this.query()
    },
    success1(data) {
      // this.sequence = data[0].outSequence
      this.query()
    },
    saveNew() {},
    Confirm() {
      if (this.outSequence == '') {
        this.$message.warning({ message: '请选择一条数据确认', offset: 400 })
        return
      }
      returnConfirm({ outSequence: this.outSequence }).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          this.$message.success({ message: '确认成功', offset: 400 })
          this.query()
        }
      })
    },
    Delete() {
      if (this.outSequence == '') {
        this.$message.warning({ message: '请选择一条数据删除' })
        return
      }
      this.$confirm('是否删除本条的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteGoods({ outSequence: this.outSequence }).then((res) => {
          console.log(res.data)
          if (res.data.code == 200) {
            this.$message.success({ message: '删除成功' })
            this.query()
          } else {
            this.$message.error({ message: '删除失败' })
          }
        })
      })
    },
    Supplement() {
      ;(this.showNew = true), (this.title = '补单')
    },
    rowClick(e) {
      // console.log(e)
      // console.log(this.saveList)
      if (e.affirm == '已确认') {
        this.isShow = true
      } else {
        this.isShow = false
      }
      this.outSequence = e.outSequence
      this.cList = []
      this.detail = [e]
      this.detail2 = []
      this.temporaryList = []
      if (!this.twoInfo) {
        this.saveList.forEach((el) => {
          if (e.outSequence == el.sequence) {
            this.cList.push(el)
            this.detail2.push(el)
          }
        })
      }
      this.twoList.forEach((el) => {
        if (e.outSequence == el.outSequence) {
          this.temporaryList.push(el)
        }
      })
      // console.log(this.temporaryList)
      if (this.twoInfo) {
        //二维
        this.cList = this.temporaryList
      }
    },
    dbClick(e) {
      // console.log(this.saveList)
      if (localStorage.getItem('whatState') != '直营') {
        this.$message('非直营客户不可更改数据')
        return
      }
      if (e.affirm != '已确认') {
        this.showNew = true
        this.title = '编辑'
        this.detail = [e]
        this.detail2 = []
        for (let a of this.saveList) {
          if (e.outSequence == a.sequence) {
            this.detail2.push(a)
          }
        }
        console.log(this.detail2)
      }
      // else {
      //   if (e.affirm != '已确认') {
      //     this.$message.warning({ message: '此单已确认', offset: 400 })
      //   }
      // }
    },
    query() {
      // if(this.timeDate == ''){
      //   this.$message.warning({message:'请选择时间'})
      //   return
      // }
      let obj = {
        affirm: this.affirm,
        twoInfo: this.twoInfo == true ? 1 : 0,
        directSaleNo: this.directSaleNo,
        kindsNumber: this.kindsNumber,
        startTime:
          this.timeDate == null
            ? ''
            : this.timeDate[0] == undefined
            ? ''
            : this.timeDate[0] + 'T00:00:00',
        endTime:
          this.timeDate == null
            ? ''
            : this.timeDate[1] == undefined
            ? ''
            : this.timeDate[1] + 'T23:59:59'
      }
      console.log(obj)
      getGoods(obj).then((res) => {
        console.log(res.data)
        if (res.data.data != null) {
          this.allData = res.data.data.outInquireTotalList
          for (let w of this.allData) {
            if (w.mnemonicCode == 1) {
              w.mnemonicCode = '已收货'
            } else {
              w.mnemonicCode = '未收货'
            }
            if (w.affirm == 1) {
              w.affirm = '已确认'
            } else {
              w.affirm = '未确认'
            }
          }
          this.dataLen = this.allData.length
          this.aList = this.allData.slice(
            (this.currentPage - 1) * this.limit,
            this.currentPage * this.limit
          )

          this.saveList = res.data.data.outInquireInfoList
          this.twoList = res.data.data.customerOutInfoTwos
        } else {
          this.pagesNum = 0
          this.currentPage = 1
          this.dataLen = 0
          this.aList = []
          this.cList = []
        }
      })
    },
    handleSizeChange(val) {
      //每页多少条
      this.limit = val
      //总页码
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      this.query()
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val
      this.query()
    }
  },
  watch: {
    kindsNumber(a, b) {
      if (a != undefined) {
        this.kindsNumber = a.toUpperCase().trim()
      }
    },
    twoInfo(a, b) {
      this.query()
      if (a) {
        this.eList = this.eList2
        if (this.cList != '') {
          var nList = []
          for (let c of this.twoList) {
            if (this.outSequence == c.outSequence) {
              nList.push(c)
            }
            this.cList = nList
          }
        }
      } else {
        this.eList = this.eList1
        if (this.cList != '') {
          var mList = []
          for (let c of this.saveList) {
            if (this.outSequence == c.sequence) {
              mList.push(c)
            }
            this.cList = mList
          }
        }
      }
    },
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    }
  }
}
</script>
